import {FbInfo} from "@/api/web/FileBucketApi.ts";
import React from "react";
import {createStyles} from "antd-style";
import FileApi from "@/api/web/FileApi.ts";
import FileBucketDefaultCover from "@/common/cover/FileBucketDefaultCover.ts";
import {UserDto} from "@/api/web/UserApi.ts";

const useStyles = createStyles(({css, token}) => {
    const cardHeight = "300px"

    return {
        container: css`
            height: ${cardHeight};
            position: relative;
            overflow: hidden;
            background-color: transparent;
            display: block;
            border: none;
            transition: all .5s;
            backdrop-filter: blur(0);
            z-index: 3;
            
            .content {
                position: absolute;
                left: 0;
                bottom: 0;
                height: 40px;
                width: 100%;
                z-index: 4;
                transition: all .2s, background-color .5s;
                display: block;
                text-align: left;
                
                h3 {
                    display: block;
                    width: 100%;
                    height: 40px;
                    font-size: 25px;
                    transition: all .5s;
                    line-height: 40px;
                    font-weight: 500;
                    background-color: ${token.colorBgContainer + "6f"};
                }
            }
            
            .cover {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 3;
                transition: all .5s;
                filter: blur(0);
                .bg {
                    width: 100%;
                    height: 100%;
                    object-position: center;
                    object-fit: cover;
                }
            }
            
            :hover {
                backdrop-filter: blur(10px);
                z-index: 4;
                cursor: pointer;

                .content {
                    height: ${cardHeight};
                    background-color: ${token.colorBgContainer + "6f"};
                    
                    h3 {
                        background-color: ${token.colorPrimary};
                    }
                }

                .cover {
                    filter: blur(5px);
                }
            }
        `,
    }
})

interface Props {
    fbInfo: FbInfo
    userDto?: UserDto
    onClick: () => void
}

const FileBucketCard = ({fbInfo, userDto, onClick}: Props) => {
    const {styles} = useStyles()

    return (
        <button
            className={styles.container}
            onClick={onClick}
        >
            <div className="cover">
                <img src={fbInfo.coverLink ? FileApi.getFileLink(fbInfo.coverLink) : FileBucketDefaultCover}
                     alt={fbInfo.name + "封面"}
                     className="bg"
                />
            </div>
            <div className="content">
                <h3>{fbInfo.name}</h3>
                <p>创建时间：{fbInfo.createTime}</p>
                <p>创建者：{userDto ? userDto.username : fbInfo.creatorId}</p>
                <p>根路径：{fbInfo.rootPath}</p>
            </div>
        </button>
    )
}

export default FileBucketCard
